<template>
    <view>
        <u-toast ref="uToast" />
        <u-modal :show="show" confirm-text="我已关注" title="温馨提示" content='需关注微信公众号才能收到提醒~' @cancel="show = false" @confirm="openRemind" />
        <u-navbar title="设置" :border="false" :autoBack="true" />
        <u-cell-group>
            <u-cell title="开学日期" :isLink="true" :value="startDate" @click="dateSet = true" />
            <u-cell title="节数设置" :isLink="true" :value="sectionArray[0][defaultIndex[0]] +' | '+ sectionArray[1][defaultIndex[1]] +' | '+ sectionArray[2][defaultIndex[2]]" @click="sectionSet = true" />
            <u-cell title="课表提醒">
                <view slot="value">
                    <u-switch v-model="value" activeColor="#5ac725" asyncChange @change="tapSwitch" />
                </view>
            </u-cell>
        </u-cell-group>
        <!-- 日期选择 -->
        <u-datetime-picker title="开学日期" mode="date" ref="datetimePicker" :show="dateSet" v-model="dateVal" :formatter="formatter" @confirm="dateChange" @cancel="dateSet = false" />
        <!-- 节数选择 -->
        <u-picker title="节数设置" :show="sectionSet" :immediateChange="true" :columns="sectionArray" :defaultIndex="defaultIndex" keyName="label" @confirm="sectionChange" @cancel="sectionSet = false" />
    </view>
</template>

<script>
import { updateDate, remind } from '@/api'
export default {
    props: {
        startDate: {
            type: String,
            default: ''
        },
        sectionIndex: {
            type: Array,
            default: ''
        },
        remind: {
            type: Boolean,
            default: true
        }
    },

    // 监听
    watch: {
        startDate(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.$emit('change', newVal)
            }
        }
    },

    data() {
        return {
            show: false,
            dateVal: new Date().getTime(),
            value: false,
            open: false,
            dateSet: false,
            sectionSet: false,
            defaultIndex: [4, 3, 1],
            sectionArray: [
                ['1节', '2节', '3节', '4节', '5节'],
                ['1节', '2节', '3节', '4节', '5节'],
                ['1节', '2节', '3节', '4节', '5节']
            ]
        };
    },

    methods: {
        // 开学时间
        async dateChange(e) {
            const date = uni.$u.timeFormat(e.value);
            const { code, message, data } = await updateDate({ date });
            this.dateSet = false;
            if (code !== 1000) {
                return this.$refs.uToast.show({
                    type: 'error',
                    message: message
                });
            }
            this.$refs.uToast.show({
                type: 'success',
                message: message
            });
            this.$emit('dateChange', date);
        },

        // 节数设置
        sectionChange(e) {
            const { indexs } = e;
            this.sectionSet = false;
            this.defaultIndex = indexs;
            uni.setStorageSync('sectionIndex', indexs);
            this.$emit('sectionChange', indexs);
        },

        // 课表提醒
        async openRemind() {
            const { code, message, data } = await remind({ remind: this.open });
            this.show = false;
            if (code !== 1000) {
                return this.$refs.uToast.show({
                    type: 'error',
                    message: message
                });
            }
            this.value = this.open;
            this.$refs.uToast.show({
                type: 'success',
                message: message
            });
            this.$emit('open', true);
        },

        // 点击开关
        async tapSwitch(e) {
            if(e) {
                this.open = e;
                this.show = true;
                return;
            }
            const { code, message, data } = await remind({ remind: e });
            if (code !== 1000) {
                return this.$refs.uToast.show({
                    type: 'error',
                    message: message
                });
            }
            this.value = e;
            this.$refs.uToast.show({
                type: 'success',
                message: message
            });
            this.$emit('open', false);
        },

        // 时间格式化
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }
            if (type === 'month') {
                return `${value}月`
            }
            if (type === 'day') {
                return `${value}日`
            }
            return value
        },
    },

    created() {
        this.dateVal = this.startDate;
        this.defaultIndex = this.sectionIndex;
    },

    onReady() {
        this.$refs.datetimePicker.setFormatter(this.formatter)
    },
};
</script>
<style lang="scss"></style>
